<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="wrap">
        <h2 id="title">批量操作多元素</h2>
        <ul class="list">
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li>06</li>
        </ul>
    </div>
</body>
<script>
    // DOM操作   => 元素的增删改查, 修改元素的内容  属性 样式

    // DOM元素
    // 1. 先获取元素    a.单元素 => 直接操作   b.多元素  => 遍历操作
    // 2. 操作元素

    // a.单元素 => 直接操作
    // var title = document.getElementById("title"); // document.querySelector("#title")
    // title.textContent = "hello";

    //  b.多元素  => 遍历操作
    // var liList = document.querySelectorAll(".list li");
    // console.log(liList);

    // for (var i = 0; i < liList.length; i++) {
    //     var li = liList[i];
    //     li.textContent = "world";
    // }

    // 统一一下: 无论单元素还是多元素 都放到数组中 => 遍历操作
    // document.querySelectorAll()   => 获取元素是无论是单元素还是多元素 都会放到集合中

    // var list = document.querySelectorAll("#title");
    // console.log(list);

    // for (var i = 0; i < list.length; i++) {
    //     var ele = list[i];
    //     ele.textContent = "11111";
    // }


    // var list = document.querySelectorAll(".list li");
    // console.log(list);

    // for (var i = 0; i < list.length; i++) {
    //     var ele = list[i];
    //     ele.textContent = "22222";
    // }

    // -------------------------------------------------  



    var list = document.querySelectorAll(".list li");
    console.log(list);

    function setText(con) {
        for (var i = 0; i < list.length; i++) {
            var ele = list[i];
            ele.textContent = con;
        }
    }

    function getText(con) {
        // var arr = [];
        // for (var i = 0; i < list.length; i++) {
        //     var ele = list[i];
        //     arr.push(ele.textContent);
        // }
        // return arr; 

        return list[0].textContent;
    }

    function addClass(classStr) { // 一个或多个(多个用空格分隔 "one two three")
        var arr = classStr.split(" "); // 
        for (var i = 0; i < list.length; i++) {
            var ele = list[i];
            ele.classList.add(...arr);
        }
    }

    function removeClass(classStr) { // 一个或多个(多个用空格分隔 "one two three")
        var arr = classStr.split(" "); // 
        for (var i = 0; i < list.length; i++) {
            var ele = list[i];
            ele.classList.remove(...arr);
        }
    }



    /*
         var getEle = {
            list: document.querySelectorAll(".list li"),
            setText() { },
            getText() { },
        }

        function GetEle(selector){
             var obj = {
                list: document.querySelectorAll(selector),
                setText() { },
                getText() { },
            }
            return obj;
        }

        function GetEle(selector){
            // {}
            // {}[[prototype]] = GetEle.prototype
            // this -> {}

            this.list = document.querySelectorAll(selector)
            
            // return this;   {list:[li,li,li,li]}
        }

         GetEle.prototype.setText = function(){}
         GetEle.prototype.getText = function(){}
    
    
    
    */







</script>

</html>